<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>操作界面</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        main {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 600px;
            text-align: center;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        #d {
            margin-top: 20px;
            font-size: 16px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <main>
        <h1>请选择您要办理的业务</h1>
        <button id="btn1" onclick="btn1()">查询余额</button>
        <button id="btn2" onclick="btn2()">转账</button>
        <button id="btn3" onclick="btn3()">查看交易信息</button>
        <button id="btn4" onclick="btn4()">存钱</button>
        <button id="btn5" onclick="btn5()">取钱</button>
        <button id="btn6" onclick="btn6()">退出</button>
        <div id="d"></div>
        <table id="t">
            <thead></thead>
            <tbody></tbody>
        </table>
    </main>
    <script>
        function clearDisplay() {
            $('#d').empty();
            $('#t thead').empty();
            $('#t tbody').empty();
        }

        function btn1() {
            clearDisplay();
            $.get("http://localhost:8080/bank/findMoneyByUsername")
              .done(function (data) {
                    $('#d').append("您的余额为:" + data + "元<br>");
                })
              .fail(function () {
                    $('#d').append("查询余额失败，请稍后重试");
                });
        }

        function btn2() {
            window.open("http://localhost:8080/bank/转账.html", "_self");
        }

        function btn3() {
            clearDisplay();
            $.getJSON("http://localhost:8080/bank/findHistoryByCardId")
              .done(function (data) {
                    if ($.isEmptyObject(data)) {
                        $('#d').append("您还没有交易记录");
                    } else {
                        var theadHtml = '<tr><th>记录</th><th>日期</th><th>类型</th></tr>';
                        $('#t thead').append(theadHtml);
                        var tbodyHtml = '';
                        for (var d in data) {
                            tbodyHtml += '<tr>';
                            var i = 0;
                            for (var key in data[d]) {
                                i++;
                                if (i != 1) {
                                    tbodyHtml += '<td>' + data[d][key] + '</td>';
                                }
                            }
                            tbodyHtml += '</tr>';
                        }
                        $('#t tbody').append(tbodyHtml);
                    }
                })
              .fail(function () {
                    $('#d').append("查看交易信息失败，请稍后重试");
                });
        }

        function btn4() {
            window.open("http://localhost:8080/bank/存钱.html", "_self");
        }

        function btn5() {
            window.open("http://localhost:8080/bank/取钱.html", "_self");
        }

        function btn6() {
            $.get("http://localhost:8080/bank/removeSession")
              .done(function (data) {
                    alert(data);
                    window.open("http://localhost:8080/bank/main.html", "_self");
                })
              .fail(function () {
                    alert("退出失败，请稍后重试");
                });
        }
    </script>
</body>

</html>